<template>
  <el-select v-model="netType" style="width: 350px;" clearable filterable class="w-100P" @change="handleChange">
    <el-option
      v-for="state in netTypeList"
      :key="state.value"
      :value="state.value"
      :label="state.label"
    />
  </el-select>
</template>

<script>
import { NetAccessTypeMap } from '@/views/device/create-product/consts'

export default {
  name: 'SelectNetType',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: { type: String, require: false, default: '' }
  },
  data() {
    return {
      netType: '',
      netTypeList: []
    }
  },
  watch: {
    value() {
      this.netType = this.value
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      for (const type in NetAccessTypeMap) {
        this.netTypeList.push({
          value: type,
          label: NetAccessTypeMap[type]
        })
      }
    },
    handleChange(value) {
      this.$emit('change', value)
    },
    handleReset() {
      this.netType = ''
      this.handleChange(this.netType)
    }
  }
}
</script>

<style scoped></style>
